<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '小区用户',
  },
  needLogin: true,
}
</route>

<template>
  <view class="community-users-container">
    <!-- 搜索栏 -->
    <view class="search-bar bg-white p-4">
      <wd-input
        v-model="searchQuery"
        placeholder="使用手机号搜索用户"
        class="mb-3"
        @input="handleSearch"
      >
        <template #suffix>
          <wd-icon name="search" @click="handleSearch" />
        </template>
      </wd-input>
      <wd-button type="primary" block @click="goToAdd">新增用户</wd-button>
    </view>

    <!-- 用户列表 -->
    <z-paging
      class="mt-26"
      ref="paging"
      v-model="userList"
      @query="queryList"
      :show-refresher-when-reload="true"
      :auto-show-back-to-top="true"
    >
      <view class="user-list px-4">
        <view
          v-for="user in userList"
          :key="user.id"
          class="user-item bg-white rounded-lg p-4 mb-3"
          @click="goToDetail(user)"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <view class="ml-3">
                <text class="text-lg font-medium">{{ user.user.description }}</text>
                <view class="text-gray-500 text-sm mt-1">
                  <text>用户: {{ user.user.username }}</text>
                </view>
                <view class="text-gray-500 text-sm mt-1">
                  <text>手机号: {{ user.user.phone }}</text>
                </view>
              </view>
            </view>
            <view class="flex items-center">
              <wd-tag :type="user.status ? 'success' : 'danger'" size="small">
                {{ user.status ? '正常' : '禁用' }}
              </wd-tag>
              <wd-icon name="arrow-right" class="ml-2" />
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/store'
import { communityUserStatusListAPI } from '@/service/gateCard'
import type { components } from '@/types/ApiInterface'

const userStore = useUserStore()
const communityId = userStore.currentCommunity?.community.id

const paging = ref<any>(null)
const userList = ref<components['schemas']['CommunityUserStatus'][]>([])
const searchQuery = ref('')

// 查询列表数据
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const res = await communityUserStatusListAPI({
      page: pageNo,
      pageSize,
      communityId: communityId!,
      phone: searchQuery.value,
    })
    paging.value.complete(res.data.list)
  } catch (error) {
    paging.value.complete(false)
    uni.showToast({
      title: '获取用户列表失败',
      icon: 'error',
    })
  }
}

// 防抖函数
const debounce = (fn, delay = 300) => {
  let timer = null
  return (...args) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 原始搜索方法
const handleSearchImpl = () => {
  paging.value.reload()
}

// 使用防抖包装的搜索方法
const handleSearch = debounce(handleSearchImpl, 500)

// 跳转到用户详情页
const goToDetail = (user: components['schemas']['CommunityUserStatus']) => {
  uni.navigateTo({
    url: `/pages/community-users/detail?id=${user.id}&username=${user.user.username}&phone=${user.user.phone}&userId=${user.user.id}&description=${user.user.description}`,
  })
}

// 跳转到新增用户页面
const goToAdd = () => {
  uni.navigateTo({
    url: '/pages/community-users/add',
  })
}

// 监听刷新事件
onShow(() => {
  paging.value.reload()
})

// 组件卸载时移除事件监听
onUnmounted(() => {})
</script>

<style lang="scss" scoped>
.community-users-container {
  min-height: calc(100vh - 95px);
  overflow: hidden;
  background-color: #f8f8f8;
}

.user-item {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  &:active {
    opacity: 0.8;
  }
}
</style>
